import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import xue from '@/assets/xue.svg';
import lei from '@/assets/lei.svg';
import shachen from '@/assets/shachen.svg';
import wu from '@/assets/wu.svg';
import bingbao from '@/assets/bingbao.svg';
import yun from '@/assets/yun.svg';
import yu from '@/assets/yu.svg';
import yin from '@/assets/yin.svg';
import qing from '@/assets/qin.svg';
import AirQuality from '@/assets/AirQuality.svg';
import Pm25 from '@/assets/Pm25.svg';
import Wind from '@/assets/Wind.svg';
class Environment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data?.air_quality_desc) {
      this.setState({
        info: nextProps.data,
      });
    }
  }
  render() {
    const { info } = this.state;
    return (
      <div className={styles.environment}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          当前环境
          <span>{info.weather_date || '--'}</span>
        </div>
        <div className={styles.main}>
          <div className={styles.left}>
            <div className={styles.normal}>
              {info.current_temperature || ''}{' '}
            </div>
            <div className={styles.weather}>
              {info.weather_img == 'qing' ? (
                <img src={qing} />
              ) : info.weather_img == 'yu' ? (
                <img src={yu} />
              ) : info.weather_img == 'xue' ? (
                <img src={xue} />
              ) : info.weather_img == 'lei' ? (
                <img src={lei} />
              ) : info.weather_img == 'shachen' ? (
                <img src={shachen} />
              ) : info.weather_img == 'wu' ? (
                <img src={wu} />
              ) : info.weather_img == 'yun' ? (
                <img src={yun} />
              ) : info.weather_img == 'yin' ? (
                <img src={yin} />
              ) : (
                <img src={bingbao} />
              )}
              {/* <img src={Sun} /> */}
              <span>{info.weather_desc || '--'}</span>
            </div>
            <div className={styles.high}>
              <span>最高</span> {info.height_temperature || '--'}{' '}
            </div>
            <div className={styles.high2}>
              <span>最低</span> {info.low_temperature || '--'}{' '}
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.direct}>
              <p className={styles.header}>
                <img src={Wind} />
                <span>风向</span>
              </p>
              <div className={styles.b}>{info.wind_direction || '--'}</div>
              <span className={styles.ping}>{info.wind_level || '--'}</span>
            </div>
            <div className={styles.PM}>
              <div className={styles.header}>
                <img src={Pm25} />
                <span>PM2.5</span>
                <div className={styles.total}>{info.pm || '--'}</div>
              </div>
            </div>
            <div className={styles.Air}>
              <p className={styles.header}>
                <img src={AirQuality} />
                <span>空气质量</span>
              </p>
              <div className={styles.b}>{info.air_quality || '--'}</div>
              <span className={styles.ping}>
                {info.air_quality_desc || '--'}
              </span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default Environment;
